<template>
  <div class="need-scroll">
    <div class="img">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../../assets/image/waijiao.png" alt="" /></van-swipe-item>
        <van-swipe-item><img src="../../assets/image/313549.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="../../assets/image/huiji.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="../../assets/image/luori.gif" alt="" /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="recommendbox">
      <div class="rec">
        <img src="../../assets/image/tuijianlogo.png" alt="" />
        <span>推荐课程</span>
      </div>
      <div class="rec-cont">
        <p>5天哈佛体验营</p>
        <p>每天25分钟，认识75%的单词</p>
        <span>每日限量100</span>
        <span class="last">0元领取</span>
        <img src="../../assets/image/niumajiaobiao.png" alt="" class="torig" />
        <img
          src="../../assets/image/niumatuijian.png"
          alt=""
          style="width: 35.5px; height: 32.5px"
          class="torig"
        />
      </div>
    </div>
    <div class="recommendbox">
      <div class="rec">
        <img src="../../assets/image/tuijianyuedu.png" alt="" />
        <span>推荐阅读</span>
      </div>
      <div class="rec-cont">
        <ul>
          <li v-for="item in readlist" :key="item.id" class="item">
            <img :src="item.src" alt="" style="width: 68.5px; height: 68.5px" />
            <div style="width: 80%">
              <p>{{ item.title }}</p>
              <p class="intro">{{ item.introduce }}</p>
              <span>{{ item.type }}</span>
            </div>
            <van-button
              type="primary"
              @click="addCourse(item.id)"
              v-if="addList.indexOf(item.id) < 0"
              class="add"
            >
              +
            </van-button>
            <van-button type="danger" @click="removeCourse(item.id)" v-else class="add2">
              +
            </van-button>
            <van-dialog />
          </li>
        </ul>
      </div>
    </div>
    <div class="recommendbox">
      <div class="rec">
        <img src="../../assets/image/aikejieshao.png" alt="" />
        <span>爱课介绍</span>
      </div>
      <div class="rec-cont">
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="item in aikeList" :key="item.id">
            <van-image :src="item.imgurl" />
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <van-divider :style="{ color: '#666666', borderColor: '' }">
      爱课，小朋友的第一堂哈佛课
    </van-divider>
    <div style="height: 50px"></div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
// import { useRouter } from "vue-router";
import { getClassListApi, getAddMyClassApi, getMyInfoApi, getDelMyClassApi } from "../../utils/api";
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  setup() {
    let readlist = ref([]);
    let addList = ref([]);
    let token1 = localStorage.getItem("token");
    onMounted(async () => {
      const res = await getClassListApi();
      if (res.status === 0) {
        readlist.value = res.classList;
      }
      if (token1) {
        const res2 = await getMyInfoApi({ token: token1 });
        if (res2.status === 0) {
          addList.value = res2.results.class;
        }
      }
    });

    const { aikeList } = getaikeList();
    return { readlist, aikeList, addList };
  },
  methods: {
    async addCourse(id) {
      const token = localStorage.getItem("token");
      if (token) {
        const res = await getAddMyClassApi({ token, id: id });
        console.log(res);
        const res3 = await getMyInfoApi({ token });
        if (res3.status === 0) {
          this.addList = res3.results.class;
          Toast.success("添加成功");
        }
      } else {
        Dialog.confirm({
          title: "登录添加课程",
          message: "点击确认即可登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      }
    },
    async removeCourse(id) {
      const token = localStorage.getItem("token");

      Dialog.confirm({
        title: "确定删除",
      })
        .then(async () => {
          const res = await getDelMyClassApi({ token, id: id });
          console.log(res);
          const res3 = await getMyInfoApi({ token });
          this.addList = res3.results.class;
        })
        .catch(() => {});
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      document.querySelector(".need-scroll").scrollTop = vm.rememberScroll;
    });
  },
  beforeRouteLeave(to, from, next) {
    if (document.querySelector(".need-scroll")) {
      this.rememberScroll = document.querySelector(".need-scroll").scrollTop;
    }
    next();
  },
};

function getaikeList() {
  const aikeList = [
    {
      imgurl: require("../../assets/image/aikejieshao1.png"),
      id: new Date().getTime(),
    },
    {
      imgurl: require("../../assets/image/aikejieshao2.png"),
      id: new Date().getTime(),
    },
    {
      imgurl: require("../../assets/image/aikejieshao3.png"),
      id: new Date().getTime(),
    },
  ];
  return { aikeList };
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 99px;
  line-height: 99px;
  text-align: center;
  margin-top: 15px;
  img {
    width: 345px;
    height: 99px;
    border-radius: 20px;
  }
}
/deep/.van-swipe__indicator--active {
  width: 25px;
  height: 4px;
  border-radius: 2px;
}
.need-scroll {
  overflow: auto;
  height: 571px;
  background-color: #fff;
}

.van-divider {
  font-weight: 600;
  font-size: 12px;
}
/deep/.van-grid-item__content {
  padding: 16px 1px;
}
/deep/.van-image {
  img {
    width: 110px;
    height: 130px;
  }
}
.recommendbox {
  margin: 15px auto;
  width: 345px;
  margin-top: 30px;

  .rec-cont {
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border: 2px solid #dedede;
    border-radius: 10px;
    box-shadow: 0 0px 2px 2px RGBA(222, 222, 222, 1);
    position: relative;
    p,
    span {
      margin: 8px 14.5px;
    }

    p:first-child {
      font-size: 17px;
      font-weight: 550;
      width: 60%;
    }
    p:nth-child(2) {
      font-size: 14px;
      color: #666666;
      width: 60%;
    }
    span {
      display: block;
      width: 76.5px;
      height: 15px;
      line-height: 15px;
      background-color: #f9dde0;
      font-size: 12px;
      font-weight: 400;

      color: #cd444c;
      text-align: center;
      border-radius: 10px;
    }
    span.last {
      color: white;
      font-weight: 600;
      width: 315px;
      height: 39.5px;
      line-height: 39.5px;
      background-color: #ea534c;
      font-size: 21px;
    }
    .torig {
      width: 56.5px;
      height: 55.5px;
      position: absolute;
      top: -5px;
      right: -5px;
    }
  }
  .rec {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 25px;
      height: 22.5px;
    }
    span {
      font-size: 17px;
      font-weight: 600;
      margin-left: 4px;
    }
  }
  .item {
    height: 97.5px;
    border-bottom: 1px #666666 dashed;
    width: 315.5px;
    margin: auto;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
    .van-button {
      position: absolute;
      right: 10px;
      top: 8px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-size: 30px;
      line-height: 40px;
      // display: flex;
      // justify-content: center;
      // align-items: center;
    }
    .add {
      line-height: 40px;
    }
    .add2 {
      transform: rotate(45deg);
    }
    img {
      width: 68.5px;
      height: 68.5px;
    }
    p {
      margin: 10px 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p:first-child {
      font-size: 15px;
      font-weight: 550;
    }
    p:nth-child(2) {
      font-size: 11px;
      color: #666666;
    }
    span {
      float: right;
      margin-right: 5px;
      border-radius: 0;
      width: 55.5px;
      height: 15px;
      background-color: #e8fcff;
      color: #32dfff;
      font-size: 11px;
    }
  }
}
</style>
